import { useEffect, useState } from "react";
import { GetAdmins, deleteAdmin, banAdmin } from "../../api/admin";
import { Button, Input, Space, Table, Tag, Spin, Pagination, message, Skeleton } from "antd"
import { useNavigate } from 'react-router-dom';
import "../../css/order.css"
import React from 'react';


const PAGE_SIZE = 10;// 设置每页显示的数据条数

const Admin = () => {
    const navigate = useNavigate();
    const [loading, setLoading] = React.useState(false);
    const [type, setType] = useState([]);
    const [currentPage, setCurrentPage] = useState(1);//当前页
    const [total, setTotal] = useState(0); // 定义total变量
    const [searchKeyword, setSearchKeyword] = useState('');//搜索关键字
    const [shows, setShows] = useState(true);//骨架屏
    const bindgoods = () => {
        setLoading(true)
        GetAdmins({
            page: currentPage,
            limit: PAGE_SIZE,
            key: searchKeyword,
        }).then((res) => {
            if (res.result === 0) {
                setLoading(false)
                setType(res.data.data);
                setTotal(res.data.total);
                setShows(false);
            }
        })
    }
    useEffect(() => {
        bindgoods();
    }, [currentPage, searchKeyword]);

    const handlePageChange = (page) => {
        setCurrentPage(page);
    };

    const Type = [
        {
            title: "序号",
            render: (text, record, index) => `${index + 1}`
        },
        {
            title: '账号',
            dataIndex: 'account',
        },
        {
            title: '姓名',
            dataIndex: 'name',
        },

        {
            title: '超级管理员',
            dataIndex: 'isSuper',
            key: 'isSuper',
            render: (_, record) => (
                <Tag color={record.isSuper === 1 ? 'blue' : 'default'}>{record.isSuper === 1 ? "是" : "否"}</Tag>
            ),

        },
        {
            title: '激活',
            dataIndex: 'isActive',
            key: 'isActive',
            render: (_, record) => (
                <Tag color={record.isActive === 1 ? 'success' : 'error'}>{record.isActive === 1 ? "是" : "否"}</Tag>
            ),
        },
        {
            title: '禁用',
            dataIndex: 'isBan',
            key: 'isBan',
            render: (_, record) => (
                <Tag color={record.isBan === 1 ? 'success' : 'error'}>{record.isBan === 1 ? "是" : "否"}</Tag>
            ),
        },
        {
            title: '添加时间',
            dataIndex: 'time',
        },
        {
            title: '操作',
            key: 'operation',
            fixed: 'right',
            width: 200,
            render: (record) => (
                <Space size="middle">

                    {record.isActive === 1 && record.isBan === 0 && (

                        <Button danger ghost id='button-ban' onClick={() => Ban(record)}>禁用</Button>
                    )}
                    {record.isActive === 1 && record.isBan === 1 && (
                        <Button danger ghost id='button-qy' onClick={() => Ban(record)}>恢复</Button>
                    )}
                    {record.isActive === 0 && (
                        <Button type="primary" danger onClick={() => Delete(record)} >删除</Button>
                    )}
                </Space>
            ),
        },

    ]
    const Ban = async (record) => {
        setLoading(true);
        const res = await banAdmin({
            id: record.id,
            isBan: record.isBan === 1 ? 0 : 1
        });
        if (res.result === 0) {
            message.success(res.message, 1.5);
            setLoading(false);
            bindgoods();
        }
    }
    const Delete = async (record) => {
        setLoading(true);
        const res = await deleteAdmin({
            id: record.id
        });
        if (res.result === 0) {
            message.success('删除成功', 1);
            setLoading(false);
            bindgoods();
        }
    }
    return (
        <div className="exam-container">
            <Skeleton loading={shows} active={true} paragraph={{ rows: 10 }} rows={20} style={{ padding: '10px' }}>
                <Spin spinning={loading} delay={500}>
                    <div className="container">
                        <div className="content">
                            <div className="button">

                                <div className="box-button1">
                                    <Button type="primary" id='button-xq' onClick={() => { navigate('/admin/add') }} style={{ marginTop: 10 }}>新增管理员</Button>
                                </div>

                                <div className='box-button2'>
                                    <Space.Compact style={{ width: '100%', height: '40px' }}>
                                        <Input placeholder="姓名/账号" value={searchKeyword}
                                            onChange={(e) => setSearchKeyword(e.target.value)} ></Input>
                                        <Button type="primary" ghost style={{ height: '40px' }}>搜索</Button>
                                    </Space.Compact>
                                </div>
                            </div>
                            <div className="table">
                                <Table
                                    columns={Type}
                                    dataSource={type}
                                    bordered
                                    pagination={false}
                                />
                            </div>
                            <Pagination current={currentPage} total={total} pageSize={PAGE_SIZE} onChange={handlePageChange} className="pagination" />
                        </div>
                    </div>
                </Spin></Skeleton>
        </div>
    )

}
export default Admin;